<script setup>

import WOW from "wow.js";
import { ref,onMounted,reactive,onUpdated   } from 'vue'
defineProps({
  msg: String,
})
const activeName = ref('first')
let input=ref('')
const activeIndex2 = ref('1')
// 产品中心
let  data=reactive({
  xaingImg:[
    {msg:'小间距',url:'http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png'}
   , {msg:'小间距',url:'http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png'}
 ,  {msg:'小间距',url:'http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png'}
, {msg:'小间距',url:'http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png'}
  ]
})


onMounted(() =>{
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function () {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
})

onUpdated(()=>{
  console.log(12);
  var wow = new WOW({
      boxClass: "wosw", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function () {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
})

// let keyword =ref('睢阳区南京路122号')
// let location=ref("商丘市")
import logo from './components/logo.vue'
import zouma from './components/zouma.vue'
import bannderTitle from './components/bannderTitle.vue'
import anli from './components/anli.vue'
import guantuwomen from './components/guantuwomen.vue'
import fuwuzhici from './components/fuwuzhichi.vue'
</script>

<template>

  <iframe src="../../../public/static/index.html" width="100%" height="100%" frameborder="0"></iframe>
<div class="main" style="height: 4800px;">
  <header class="header">
<logo   />
<div class="bannder">

  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color=""
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>项目案例</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>sss</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>产品中心</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>sss</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>服务与支持</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>sss</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>关于我们</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>sss</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="6">联系我们</el-menu-item>
  </el-menu>


</div>
<div class="serch">
  
<el-input v-model="input" placeholder="Please input" suffix-icon="Search" clearable />
</div>
  </header>


  <zouma />
  <div class="clace ">
    <bannderTitle>产品中心</bannderTitle>
    <ul class="xiangc">
      <li class="wow bounceInUp" v-for="(item,index) in data.xaingImg" :key="index">
      <img :src="item.url" alt="">
      <p>{{ item.msg }}</p>
      </li>
     
    </ul>
  </div>
  <div class="clace ">
    <bannderTitle>经典案例</bannderTitle>
    <div class="tab wow slideInDown" style="margin-top: 20px;">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="小间距显示屏案例" name="first">
<anli />

    </el-tab-pane>
    <el-tab-pane label="LED异形屏案例" name="second"><anli /></el-tab-pane>
    <el-tab-pane label="LED户外显示屏案例" name="third"><anli /></el-tab-pane>
    <el-tab-pane label="室内显示屏案例" name="fourth"><anli /></el-tab-pane>
    <el-tab-pane label="LED租赁屏案例" name="fourths"><anli /></el-tab-pane>
  </el-tabs>
   </div>
  </div>
<div>
  <bannderTitle>关于我们</bannderTitle>
  <guantuwomen />
</div>
<!-- 服务支持  -->
<div style="margin-bottom: 30px;">
  <fuwuzhici />
</div>
<!-- 联系我们  -->
<bannderTitle>联系我们</bannderTitle>
<p class="lianty">本着以客户为中心原则，提供完善的售后服务</p>

<p class="lianty sdsda">In line with customer-oriented principle, provide perfect after-sales service</p>
  
<div class="lianxi">
<div class="boleft">
<p class="fandh">联系方式</p>

<ul class="lianxiang">
  <li>地址： 河南省商丘市宁陵县罗楼村</li>
<li>手机：13255929517</li>
<li>座机：0370-7628380</li>
<li>邮箱：13255929517@163.com</li></ul>
<div style="   margin-top: 50px; display: flex;
align-items: center;
">
  <img style="width: 54px;
margin-right: 20px;

  height: 54px;" src="http://pmt5f46b3.pic13.websiteonline.cn/upload/templatefiles/000.png" alt="">
<div>
  <span style="font-size: 18px;">服务热线</span>
  <p style="font-size: 25px; color: #ffd04b;">13255929517</p>
</div>


</div>
  </div>


  <div class="lianright">

  <baidu-map scroll-wheel-zoom="true" class="bm-view" :zoom="15"
   :center="{lng: 116.404, lat: 39.915}">
   <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" ></bm-marker>
   <bm-city-list :offset="{width: 30, height: 52}" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
   <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
   <bm-label content="我爱北京天安门" :position="{lng: 116.404, lat: 39.915}" :labelStyle="{color: 'red', fontSize : '24px'}" title="Hover me" />
   <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>

   <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <bm-transit start="百度大厦" end="北京邮电大学西门" :auto-viewport="true" location="北京"></bm-transit>
  </baidu-map>

  </div>
 

</div>
</div></template>

<style scoped>
.lianright{
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang{
  margin-top: 30px;
}
.lianxiang li{
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh{
  font-size: 24px;
  font-weight: 700;
    color: rgb(127, 127, 127);}
.sdsda{
  font-size: 16px !important;
}
.lianty{
  text-align: center;
  font: 15px/140% Arial,"宋体",Helvetica, sans-serif,Verdana;
    color: #5a5a5a;
}
.boleft{
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi{
  display: flex;

width: 1200px;
margin: auto;
margin-top: 20px;
border: 1px solid rgb(243, 243, 243);
   
    background-color: rgb(251, 251, 251);

}
.bm-view{width: 100%;
 
height: 100%;}
:deep(.el-tabs__item){
  font-size: 16px;
}:deep(.el-tabs__nav-wrap::after){
  height: 0;
}
:deep(.el-tabs__item.is-active){
  color: #ffd04b;
}
:deep(.el-tabs__active-bar){
  background-color: #ffd04b !important;
}
:deep(.el-tabs__item:hover){
  color: #ffd04b;
}

.xiangc{
 background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li{
  cursor: pointer;
  width: 20%;
  height: 200px;
  
}
.xiangc li img{
  width: 100%;
  height: 80%;
  transition: all .2s linear;
}
.xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
}

.xiangc li p{
  text-align: center;
  font-size: 16px;
}

.clace{
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
/* background-color: red; */
}
.serch{display: flex;
align-items: center;
width: 180px;}
.header{
  position: absolute; 
width: 100%;
  z-index: 99999;
  display: flex;
padding: 0px 30px;
background-color: rgb(0, 0, 0,.2);
}
:deep(.el-sub-menu__title){
  font-size: 16px;
  color: #fff !important;
}
.bannder{margin-left: 50px;

width: 61%;}
:deep(.el-menu) {
  background: rgba(0, 0, 0, 0);
}

:deep(.el-menu-item){
  font-size: 16px;
  color: #fff !important;
}
:deep(.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover){
  color: #ffd04b !important;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus){
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-menu--horizontal .el-menu .el-menu-item,.el-menu--horizontal .el-menu .el-sub-menu__title){
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover){
  color: #ffd04b !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title){
  color: #ffd04b !important;
  
}
.el-menu--horizontal.el-menu{border-bottom: 0;}
</style>
